<template>
  <div class="timeCount-container fx-r">
    <span>剩余:</span>
    <div>{{this.day}}天{{ this.hour }}时{{ this.minute }}分{{ this.second }}秒</div>
  </div>
</template>

<script>
export default {
  name: "countdown",
  data() {
    return {
      endTime: 0,
      day: 0,
      hour: 0,
      minute: 0,
      second: 0,
      interval: null,
    };
  },
  //传值
  props: {
    //倒计时时间
    longTime: {
      type: Number,
      default: 0,
    }
  },
  mounted() {
    //结束时间
    this.endTime =  this.longTime * 1000;
    //开始倒计时
    this.countdown();
  },
  beforeDestroy() {
    //提前结束则销毁倒计时
    clearTimeout(this.interval);
  },
  methods: {
    countdown() {
      //计算运行时间
      const end = this.endTime;
      const now = Date.parse(new Date());
      const msec = (end - now) / 1000;
      let time = 0;
      //计算剩余时间
     this.day    = parseInt(msec / 86400);
     time        = msec % 86400;
     this.hour   = parseInt(time / 3600);
     time        = time % 3600;
     this.minute = parseInt(time / 60);
     time        = time % 60;
      this.second =time;
      const that = this;
      //结束则弹框
      if (msec > 0) {
        this.interval = setTimeout(that.countdown, 1000);
      }
    },
  },
};
</script>

<style lang='less' scoped>
</style>
